<template>
  <div class="content">
    <header>
      <div class="content-swapper">
        <img src="../../../public/images/login.png">
      </div>
      <nav>

        <router-link to="/recommend" class="toList">资源</router-link>
        <router-link to="/discovery" class="toList">课程</router-link>
        <router-link to="/room" class="toList">练习室</router-link>
        <router-link to="/communicaitio" class="toList">交流</router-link>
        <router-link to="/my" class="toList">我的</router-link>
      </nav>
     
    
      <a href="#" class="app"> 
      <img src="../../../public/images/1.png">
        下载App
      </a>

      <div class="release">
        +发布
      </div>
      <el-dropdown v-if="token" style="margin-left:1006px ;margin-top:-40px;">
        <img @click="touserinfo" style="width:35px;height:35px;border-radius: 50%;" src="../../assets/1.jpg" alt="">
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      
      <span v-else class="login-button" ><router-link to="/login">登录</router-link></span>
    </header>
  </div>
    
</template>

<script setup lang="ts">
import {onMounted,ref} from 'vue'
import {RouterLink } from 'vue-router'
import userInfoStore from '../../stores/login'
import router from '../../router/index'
let InfoStore =userInfoStore()

let token=ref<any>('')
onMounted(()=>{
 token.value=localStorage.getItem('token')
})

//退出登录
const logout=()=>{
  InfoStore.logout()
  router.push({
        path:'/login'
    })
}
// 个人详情页面
const touserinfo=()=>{
  router.push({
    path:"/userinfo"
  })
}
</script>

<style scoped>
.content{
  width: 100%;
  height: 60px;

  box-shadow:0px 15px 10px -15px #000;
}
.content-swapper img{
  width: 128px;
  height: 30px;
  margin-top: 13px;

}
header{
 width: 1200px;
 margin: 0 auto;
}
.toList{
  line-height: 45px;

}
nav{
 padding-left: 200px;
  position: absolute;
  top:10px;
}
a{
  width: 100px;
  margin-left: 40px;
  font-size:18px;
  text-decoration: none;
  color:#111;
 }
 .one{
  color:#f93684;
 }
 .release{
  border-radius: 15px;
  width: 75px;
  height: 30px;
  padding: 0;
  color:azure;
  background-color: #f93684;
  text-align: center;
  line-height: 29px;
  float: right;
  margin-top: -38px;
  margin-right: 108px;
  font-size:14px
}
 .login-button{
  padding: 10px;
  cursor: pointer;
  font-size: 16px;
  margin: 11px 0;
  color: #111;
  float: right;
  margin-top: -45px;
  font-size:17px
 }
 .app{
  width: 100px;
  height: 16px;
  float: left;
  position: relative;
  left: 870px;
  top:-34px;
  font-size: 17px;
 }

 
</style>